<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    .tab_box {
        width: 400px;
        height: 400px;
        background-color: aqua;
        margin: 20px auto;
    }

    .tab_box .tab_tit {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: skyblue;
    }

    .tab_box .tab_tit li {
        float: left;
        padding: 0 20px;
    }

    .tab_box .tab_tit li.on {
        background-color: brown;
        color: #fff;
        font-weight: 800;
    }

    .tab_box .tab_con {
        width: 100%;
        height: 360px;
        background-color: brown;
    }

    .tab_box .tab_con .item {
        display: none;
        padding: 10px;
    }

    .tab_box .tab_con .dis {
        display: block;
    }

    .tab_box .tab_con .dis img {
        width: 100%;
    }
</style>


<body>
    <div class="tab_box">
        <ul class="tab_tit">
            <li class="on">新闻</li>
            <li>活动</li>
            <li>视频</li>
            <li>好看</li>
        </ul>
        <div class="tab_con">
            <div class="item dis"><img src="img/001.jpg" alt=""></div>
            <div class="item"><img src="img/002.jpg" alt=""></div>
            <div class="item"><img src="img/003.jpg" alt=""></div>
            <div class="item"><img src="img/004.jpg" alt=""></div>
        </div>
    </div>
</body>
<script>
    var lis = document.querySelectorAll('.tab_tit>li')
    var items = document.querySelectorAll('.item')

    for (var i = 0; i < lis.length; i++) {

        lis[i].setAttribute('index', i)     // 添加 index 标记

        lis[i].onmouseover = function () {   // 鼠标触发 移动事件

            for (var j = 0; j < lis.length; j++) {   // 遍历清空属性

                lis[j].className = ''
                items[j].className = 'item'
            }

            this.className = 'on'

            var idx = this.getAttribute('index');  // 获取 当前 index
            items[idx].className = 'item dis'   // 显示对应图片
        }
    }

</script>

</html>